<template>
	<view class="container">
		<view class="header">
			<view class="back" @click="backClick">返回</view>
			提交合作意向
		</view>
		<view class="example">
			<!-- 自定义表单校验 -->
			<uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="customFormData"
				label-position="top">
				<uni-forms-item label="您的姓名" required name="name">
					<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" required name="phone">
					<uni-easyinput v-model="customFormData.phone" placeholder="请输入手机号码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" required name="code">
					<view class="form-item">
						<uni-easyinput v-model="customFormData.code" placeholder="请输入验证码" />
						<button class="button" :disabled="disabled" size="mini" type="default" @click="phoneCode('customForm')">{{codetext}}</button>
					</view>
				</uni-forms-item>
				<uni-forms-item label="公司名称" required name="company">
					<uni-easyinput v-model="customFormData.company" placeholder="请输入公司名称" />
				</uni-forms-item>
				<uni-forms-item label="职位" required name="position">
					<uni-easyinput v-model="customFormData.position" placeholder="请输入职位" />
				</uni-forms-item>
				<uni-forms-item label="合作意向" required name="intention">
					<uni-easyinput type="textarea" v-model="customFormData.intention" placeholder="请填写合作意向" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('customForm')">提交意向</button>
		</view>
	</view>
</template>

<script>
	import {PostCooperationSave,PostsendSms} from '@/common/api/index.js'
	export default {
		data() {
			return {
				id:0,
				names:'',
				types:'',
				// 自定义表单数据
				customFormData: {
					adsId:'',
					adsName:'',
					adsType:'',
					name: '',
					phone: '',
					code: '',
					company: '',
					position: '',
					intention: ''

				},
				codetext:'获取验证码',
				codenum:60,
				timer:null,
				disabled:false,
				// 自定义表单校验规则
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(
											value
										) == false) {
										callback('请输入正确的手机号')
									}
									return true
								}
							}
						]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					},
					company: {
						rules: [{
							required: true,
							errorMessage: '请输入公司名称'
						}]
					},
					position: {
						rules: [{
							required: true,
							errorMessage: '请输入职位'
						}]
					},
					intention: {
						rules: [{
							required: true,
							errorMessage: '请输入合作意向'
						}]
					},

				},
			}
		},
		computed: {
			// 处理表单排列切换
			alignment() {
				if (this.current === 0) return 'left'
				if (this.current === 1) return 'top'
				return 'left'
			}
		},
		onLoad(options) {
			console.log(options)
			this.id=options.id
			this.names=options.name
			this.types=options.type
		},
		mounted(){
			var value = wx.getStorageSync('userinfo');
			console.log(value); // 输出：value
			this.customFormData.phone = value.phoneNumber
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			phoneCode(ref){
				
				if(this.customFormData.phone){
					
					PostsendSms(this.customFormData.phone).then(res=>{
						let that=this
							if(res.code==200){
								console.log(res)
								that.codetext='已发送'
								that.timer = setInterval(() => {
									if(that.codenum>0){
										that.codenum=that.codenum-1
										this.codetext=that.codenum
										that.disabled=true
									}else{
										that.codenum=60
										this.codetext='获取验证码'
										clearInterval(that.timer);
										that.timer=null
										that.disabled=false
									}
								}, 1000);
							}
					}).catch(err => {
						console.log('err', err);
					})
					}
				
				// this.$refs[ref].validate().then(res => {
				// 	console.log(res)
				// })
				
			},
			backClick(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			del(id) {
				// let index = this.dynamicLists.findIndex(v => v.id === id)
				// this.dynamicLists.splice(index, 1)
			},
			submit(ref) {
				this.customFormData.adsId=this.id
				this.customFormData.adsType=this.types
				this.customFormData.adsName=this.names
				
				this.$refs[ref].validate().then(res => {
					PostCooperationSave(this.customFormData).then(res=>{
						// console.log(res)
						if(res.code==200){
							uni.showToast({
								title: '您已提交合作意向，请等待对接！',
								icon: 'none',
								duration: 2000
							})  
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		padding-top: 80rpx;
	}
	.header {
		position: relative;
		padding: 15rpx 60rpx 0rpx;
		font-size: 36rpx;
		font-weight: 600;
		line-height: 60px;
		height: 60px;
		text-align: center;
			
		.back{
			position: absolute;
			left: 5%;
		}
	}
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px !important;
		margin-left: 10px;
		
	}
	button{
		background-color: #1664FF !important;
		color: #ffffff !important;
	}
	// v-deep{
		.example /deep/ .is-required{
			margin-top: 7rpx !important;
		}
	// }
</style>